<style>
    .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
        height: 34px;
        line-height: 34px;
        padding: 0 8px;
    }
</style>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div>
            <div class="layui-btn-group">
                <button class="layui-btn" id="btn-expand">全部展开</button>
                <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
                <button class="layui-btn layui-btn-danger" id="btn-add">添加菜单</button>
            </div>
            <table id="menu-table" class="layui-table" lay-filter="menu-table"></table>
        </div>
    </div>
</div>
<!-- 操作列 -->
<script type="text/html" id="auth-state">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="/static/extends/layuimini/js/lay-config.js?v={:sysconf('version')}" charset="utf-8"></script>
<script>
    layui.config({
        base: '/static/extends/'
    }).extend({
        tableEdit:'tableTree/tableEdit',
        tableTree:'tableTree/tableTree',
    });
    layui.use(['table', 'tableTree'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var tableTree = layui.tableTree;

        // 渲染表格
        layer.load(2);
        let treeTable = tableTree.render({
            elem: '#menu-table'
            ,id:'tableTree'
            ,url:"{:url('getSystemInitMenu')}"
            ,height: 'full-90'
            ,size:'sm'
            ,toolbar: '#menu-table' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,page: true
            ,treeConfig:{ //表格树所需配置
                showField:'title' //表格树显示的字段
                ,treeid:'id' //treeid所对应字段的值在表格数据中必须是唯一的，且不能为空。
                ,treepid:'pid'//父级id字段名称
                ,iconClass:'layui-icon-right' //小图标class样式 窗口图标 layui-icon-layer
                ,showToolbar: true //展示工具栏 false不展示 true展示
            }
            ,cols: [[
                {type:'checkbox'}
                ,{field:'title',title: '名称',width:300}
                ,{field:'id',title:'id',sort:true,event:'id',config:{type:'input'},width:120}
                ,{field:'sort', title: '排序',event:'sort',width:70,config:{type:'input'}}
                ,{field:'href',title:'路径'}
                ,{field:'create_time', title: '创建时间'}
            ]],done:function () {
                treeTable.closeAllTreeNodes();
                treeTable.openTreeNode(1)
                layer.closeAll('loading');
            }
        });

        $('#btn-expand').click(function () {
            treetable.expandAll('#munu-table');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#munu-table');
        });
        $("#btn-add").click(function () {
            hadmin.add("添加菜单", "{:url('add')}")
        });

        //监听工具条
        table.on('tool(munu-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'del') {
                layer.msg('删除' + data.id);
            } else if (layEvent === 'edit') {
                layer.msg('修改' + data.id);
            }
        });
    });
</script>